import React, { type FC } from 'react';
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Avatar, Image } from 'antd-mobile'
import searchIcon from '../../../public/Icon/search_icon.png'
import messageIcon from '../../../public/Icon/information_black_n.png'
import userIcon from '../../../public/Icon/user.png'
import './index.css'
interface PropsType {
    title?: string // 可选的标题文字，用于非首页的页面标题显示
    type?: string // 可选的类型参数，用于显示不同的内容
}
const HomeHeader: FC<PropsType> = ({ type }) => {
    const navigate = useNavigate()
    const [isLogin, setIsLogin] = useState(false);
    useEffect(() => {
        const token = localStorage.getItem('token')
        if (token) {
            setIsLogin(true)
        }
    }, []);

    return (
        <div className="header-container">
            {/* 左侧用户头像 */}
            <div
                className="user-avatar-container"
                onClick={() => {
                    if (isLogin) {
                        navigate('/my')
                    } else {
                        navigate('/login')
                    }
                    // navigate('/my')
                }}
            >
                <Avatar
                    src={userIcon}
                    className="home-user-avatar"
                />
            </div>
            {
                type ? (
                    <div className="patient-avatar-container">
                        {type}
                    </div>
                ) : <div
                    className="search-box-container"
                    onClick={() => {
                        navigate("/search");
                    }}
                >
                    <Image
                        src={searchIcon}
                        width={16}
                        height={16}
                        lazy
                        className="search-icon"
                    />
                    <span className="search-placeholder">
                        请输入症状/疾病
                    </span>
                </div>
            }

            {/* 中间搜索框 */}


            {/* 右侧通知图标 */}
            <div className="notification-container">
                <Image
                    src={messageIcon}
                    width={24}
                    height={24}
                    className="notification-icon"
                />
            </div>
        </div>
    );
};

export default HomeHeader;